<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FootBall Game</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
    <div id="app" class="background">
        <div id="myProgress">
            <div id="myBar">0%</div>
        </div>
        <div class="info" v-if="!dialogVisible">
            用户：{{info.name}}
            <br>
            分数：{{info.score}}
            <br>
            排名：{{info.rank}}
        </div>
        <svg id="gate" class="gate" t="1620527545136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2966" width="400" height="400"><path d="M861.414041 192.806237 179.968861 192.806237c-51.828412 0-93.985558 42.164309-93.985558 93.985558l0 514.915399 61.975517 0 0-0.276293 0.796132 0.650823 74.704422-89.905636 597.571934 0 72.39482 87.839581 0 1.691525 62.007239 0L955.433368 286.791795C955.432345 234.970546 913.228127 192.806237 861.414041 192.806237zM199.153806 689.236634l-51.196009 61.657268L147.957797 286.791795c0-2.625804 0.422625-5.13802 0.992607-7.584746l50.203402 55.610552L199.153806 689.236634zM232.481865 678.848029l0-10.380418 10.389628 10.380418L232.481865 678.848029zM270.460852 678.848029l-37.978986-37.945217 0-0.276293 38.075177-38.092573 38.238906 38.22151-38.092573 38.092573L270.460852 678.848029zM672.79108 484.770845l-38.173414 38.213323-38.222533-38.213323 38.222533-38.255279L672.79108 484.770845zM648.403646 432.737772l38.207184-38.20616 38.220487 38.20616-38.220487 38.238906L648.403646 432.737772zM582.609151 470.976678l-38.222533-38.238906 38.222533-38.20616 38.238906 38.20616L582.609151 470.976678zM568.806797 484.770845l-38.222533 38.213323-38.238906-38.213323 38.238906-38.255279L568.806797 484.770845zM478.576773 470.976678l-38.190811-38.238906 38.190811-38.20616 38.222533 38.20616L478.576773 470.976678zM464.821491 484.770845l-38.205137 38.213323-38.222533-38.213323 38.222533-38.255279L464.821491 484.770845zM374.575094 470.976678l-38.190811-38.238906 38.190811-38.20616 38.238906 38.20616L374.575094 470.976678zM360.789113 484.770845l-38.207184 38.213323-38.222533-38.213323 38.222533-38.255279L360.789113 484.770845zM360.789113 588.756151l-38.207184 38.222533-38.222533-38.222533 38.222533-38.205137L360.789113 588.756151zM336.384283 536.762987l38.190811-38.228673 38.238906 38.228673-38.238906 38.207184L336.384283 536.762987zM426.616354 550.551014l38.205137 38.205137-38.205137 38.222533-38.222533-38.222533L426.616354 550.551014zM440.385962 536.762987l38.190811-38.228673 38.222533 38.228673-38.222533 38.207184L440.385962 536.762987zM530.584264 550.551014l38.222533 38.205137-38.222533 38.222533-38.238906-38.222533L530.584264 550.551014zM544.387641 536.762987l38.222533-38.228673 38.238906 38.228673-38.238906 38.207184L544.387641 536.762987zM634.617665 550.551014l38.173414 38.205137-38.173414 38.222533-38.222533-38.222533L634.617665 550.551014zM648.403646 536.762987l38.207184-38.228673 38.220487 38.228673-38.220487 38.207184L648.403646 536.762987zM738.619344 550.551014l38.222533 38.205137-38.222533 38.222533-38.238906-38.222533L738.619344 550.551014zM700.380438 484.770845l38.238906-38.255279 38.222533 38.255279-38.222533 38.213323L700.380438 484.770845zM700.380438 380.746654l28.857235-28.866445c1.251503-1.235131 1.917676-2.723018 2.357697-4.299933l20.499893 0c0.440022 1.576915 1.13894 3.064802 2.357697 4.299933l25.590841 25.598005-41.425482 41.473577L700.380438 380.746654zM686.61083 366.958626l-19.396769-19.378349 38.757722 0L686.61083 366.958626zM672.79108 380.746654l-38.173414 38.205137-38.222533-38.205137 28.857235-28.866445c1.203408-1.235131 1.853208-2.723018 2.340301-4.299933l13.997805 0c0.456395 1.576915 1.122567 3.064802 2.390443 4.299933L672.79108 380.746654zM582.609151 366.958626l-19.396769-19.378349 38.743396 0L582.609151 366.958626zM568.806797 380.746654l-38.222533 38.205137-38.238906-38.205137 28.874631-28.866445c1.251503-1.235131 1.934049-2.723018 2.38942-4.299933l13.982456 0c0.437975 1.576915 1.153266 3.064802 2.37407 4.299933L568.806797 380.746654zM478.576773 366.958626l-19.363-19.378349 38.757722 0L478.576773 366.958626zM464.821491 380.746654l-38.205137 38.205137-38.222533-38.205137 28.857235-28.866445c1.218758-1.235131 1.901303-2.723018 2.323928-4.299933l14.014178 0c0.456395 1.576915 1.121544 3.064802 2.357697 4.299933L464.821491 380.746654zM374.575094 366.958626l-19.363-19.378349 38.757722 0L374.575094 366.958626zM360.789113 380.746654l-38.207184 38.205137-41.457204-41.473577 25.589818-25.598005c1.251503-1.235131 1.951445-2.723018 2.357697-4.299933l20.533662 0c0.422625 1.576915 1.088798 3.064802 2.325975 4.299933L360.789113 380.746654zM267.322371 363.691209l-16.095583-16.109909 32.223912 0L267.322371 363.691209zM253.552763 377.478214l-21.070898 21.053502 0-42.074258L253.552763 377.478214zM267.322371 391.281591l41.473577 41.457204-38.238906 38.238906-38.075177-38.10076 0-6.763031L267.322371 391.281591zM256.787434 484.770845l-24.305569 24.281009L232.481865 460.449927 256.787434 484.770845zM270.557042 498.534314l38.238906 38.228673-38.238906 38.207184-38.075177-38.083363 0-0.252757L270.557042 498.534314zM256.787434 588.756151l-24.305569 24.297382 0-48.586578L256.787434 588.756151zM298.293757 678.848029l24.288173-24.297382 24.305569 24.297382L298.293757 678.848029zM374.461507 678.848029l-38.077224-38.092573 38.190811-38.22151 38.238906 38.22151-38.125319 38.092573L374.461507 678.848029zM402.26269 678.848029l24.354688-24.297382 24.239054 24.297382L402.26269 678.848029zM478.478536 678.848029l-38.092573-38.092573 38.190811-38.22151 38.222533 38.22151-38.108946 38.092573L478.478536 678.848029zM506.295068 678.848029l24.289196-24.297382 24.320918 24.297382L506.295068 678.848029zM582.494541 678.848029l-38.1069-38.092573 38.222533-38.22151 38.238906 38.22151-38.157042 38.092573L582.494541 678.848029zM610.246605 678.848029l24.37106-24.297382 24.305569 24.297382L610.246605 678.848029zM686.49622 678.848029l-38.092573-38.092573 38.207184-38.22151 38.220487 38.22151-38.1069 38.092573L686.49622 678.848029zM714.296379 678.848029l24.322965-24.297382 24.272823 24.297382L714.296379 678.848029zM804.413839 665.166425l-13.70514 13.681604-0.210801 0-38.125319-38.092573 38.222533-38.22151 13.81975 13.811564L804.414863 665.166425zM804.413839 588.780711l-0.016373-0.024559 0.016373-0.016373L804.413839 588.780711zM804.413839 561.158606l-13.81975 13.811564-38.222533-38.207184 38.222533-38.228673 13.81975 13.809517L804.413839 561.158606zM804.413839 484.770845l-0.016373 0 0.016373-0.033769L804.413839 484.770845zM804.413839 457.156928l-13.81975 13.81975-38.222533-38.238906 41.48995-41.457204 10.55131 10.558473L804.412816 457.156928zM804.413839 353.148086l-10.55131 10.543124-16.160051-16.109909 26.711362 0L804.413839 353.148086zM810.851459 314.243007 227.264027 314.243007l-54.593386-58.536184c2.340301-0.544399 4.762467-0.902556 7.29822-0.902556l681.44518 0c0.730641 0 1.36509 0.146333 2.081405 0.194428L810.851459 314.243007zM893.425106 747.601926l-55.682183-67.542302L837.742922 334.818625l53.147454-60.47228c1.62501 3.805676 2.535753 8.024767 2.535753 12.446473L893.426129 747.601926z" p-id="2967" fill="#e6e6e6"></path></svg>
        <svg id="ball" class="ball" t="1620527208144" class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1801" width="400" height="400"><path d="M647.937 1023.573c-40.96 0-82.133-5.12-122.24-14.933-66.773-16.427-128.427-45.44-183.04-86.4-52.693-39.467-96.853-88.107-131.2-144.853-34.347-56.747-56.96-118.4-67.2-183.467-10.88-67.413-7.893-135.467 8.533-202.24 14.08-56.747 37.334-110.293 69.12-158.72 30.934-46.72 69.12-88.107 113.707-122.453 44.16-34.134 93.227-60.587 145.92-78.934 53.547-18.56 109.44-27.946 165.973-27.946 40.96 0 82.134 5.12 122.24 14.933 66.774 16.427 128.427 45.44 183.04 86.4 52.694 39.467 96.854 88.107 131.2 144.853 34.347 56.747 56.96 118.4 67.2 183.467 10.88 67.413 7.894 135.467-8.533 202.24-14.08 56.747-37.333 110.293-69.12 158.72-30.933 46.72-69.12 88.107-113.707 122.453-44.16 34.134-93.226 60.587-145.92 78.934-53.76 18.56-109.44 27.946-165.973 27.946z m-0.853-997.12c-224.427 0-418.774 152.32-472.534 370.56-64.213 260.694 95.574 525.227 356.48 589.44 38.4 9.387 77.654 14.294 116.907 14.294 224.427 0 418.773-152.32 472.533-370.56 31.147-126.294 11.094-257.28-56.106-368.64C996.95 150.187 890.497 71.68 763.99 40.533c-38.4-9.173-77.653-14.08-116.906-14.08z m113.28 13.654L604.417 676.48" fill="#333333" p-id="1802"></path><path d="M749.27 37.547l21.974 5.333L615.51 679.04l-21.973-5.333L749.27 37.547zM628.95 522.24L281.43 845.867" fill="#333333" p-id="1803"></path><path d="M621.27 513.92l15.36 16.64-347.306 323.627-15.36-16.64L621.27 513.92z m521.814 18.133l-662.187-35.626" fill="#333333" p-id="1804"></path><path d="M481.537 485.12l662.187 35.627-1.28 22.613-662.187-35.627 1.28-22.613z m314.667 496.64L603.99 374.613" fill="#333333" p-id="1805"></path><path d="M614.87 371.2l192.214 607.147-21.547 6.826-192.213-607.146 21.546-6.827z m-397.44-63.147l581.334 268.16" fill="#333333" p-id="1806"></path><path d="M222.124 297.813l581.546 268.16-9.386 20.48-581.76-267.946 9.6-20.694z m0 0" fill="#333333" p-id="1807"></path><path d="M364.844 376.747L336.47 135.253l-11.306-2.346C247.51 198.4 189.057 288.213 162.817 394.453c-6.613 26.667-10.88 53.76-13.013 81.28l215.04-98.986z m47.573 351.573L178.39 684.16c45.44 124.16 139.52 228.693 264.96 284.587L412.417 728.32z m177.707 273.92l4.693 7.04c136.32 14.507 268.587-28.373 369.493-111.573l-221.013-84.694-153.173 189.227z m376.96-472.107l125.866 205.654c16-32.214 28.587-66.56 37.547-102.827 23.68-96.213 17.707-192.64-12.16-279.893L967.084 530.133zM562.39 22.4l156.8 183.253 223.787-93.013C891.564 74.667 832.044 45.867 765.91 29.653 697.004 12.8 628.097 11.093 562.39 22.4z m155.094 699.307l128.426-206.72-156.8-186.027-225.28 91.733 17.707 242.56 235.947 58.454z m0 0" fill="#333333" p-id="1808"></path></svg>
        <svg class="people" @click="clickPeople" t="1620527325090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2618" width="400" height="400"><path d="M563.240423 102.320551m-102.320551 0a102.320551 102.320551 0 1 0 204.641102 0 102.320551 102.320551 0 1 0-204.641102 0Z" p-id="2619" fill="#e6e6e6"></path><path d="M322.895467 827.809372c-8.907907 20.054828-155.767992 195.805422-155.767992 195.805421h122.447605s106.292996-119.58263 113.924906-134.027884 38.954036-122.784661 38.954035-122.784661l-74.633813-83.469495s-36.113136 124.397715-44.924741 144.476619z" p-id="2620" fill="#e6e6e6"></path><path d="M837.50765 515.815955c0-0.409282-90.571744-32.718501-102.609456-37.533586s-29.684998-14.445254-38.520678-32.911104-29.083112-75.957962-44.130252-99.503727c-9.10051-14.228575-57.781017-92.425552-157.284743-88.284579-49.860203 2.094562-175.750594 47.019303-207.506078 65.003644-47.693415 27.301531-124.542167 159.427456-124.542167 159.427457A50.895446 50.895446 0 1 0 247.033807 539.289493s68.927938-109.90431 85.877036-125.192204c19.934451-17.815814 81.302706-35.824231 92.955211-37.076152 6.572591-0.722263-36.907625 163.712882-36.907624 194.216443s3.707615 45.743305 37.557661 83.469495 133.377848 142.045 142.189453 158.103308 78.726636 211.189617 78.726636 211.189617h106.726353s-52.171443-195.805422-85.877036-255.199492c-39.002187-68.735335-125.192204-153.288223-128.394235-166.914913s36.113136-172.548562 36.113135-172.548563 31.298051 72.226271 44.948816 87.466015a255.512473 255.512473 0 0 0 58.599582 47.356359c19.04366 10.882092 98.299955 38.520678 125.481109 46.176662a49.571298 49.571298 0 0 0 5.754026 1.516752 12.663673 12.663673 0 0 0 3.226107 0.505584 49.956504 49.956504 0 0 0 23.497613-96.518374z" p-id="2621" fill="#e6e6e6"></path></svg>
        <el-dialog
        title="输入姓名"
        :visible="dialogVisible"
        width="30%"
        :show-close="false"
        >
        <el-form v-model="info">
            <el-form-item label="姓名">
                <el-input v-model="info.name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitInfo">确 定</el-button>
        </span>
        </el-dialog>
    </div>
    <script src="js/api.js"></script>
    <script src="js/index.js"></script>
    
</body>

</html>